<template>
    <div class="app">
        <div class="nav">
            <div class="details df jcsb">
                <div class="details_l">
                    <p class="num ">5.0</p>
                    <p class="comprehensive">综合评分</p>
                    <p class="higher">高于周边商家96%</p>
                </div>
                <div class="details_f">
                    <p>服务态度 <van-rate v-model="value" allow-half void-icon="star" void-color="#eee" />&emsp;<span>4.5</span>
                    </p>
                    <p>菜品质量 <van-rate v-model="value" allow-half void-icon="star" void-color="#eee" />&emsp;<span>4.5</span>
                    </p>
                    <p> 送达时间 <span class="data">20分钟</span></p>
                </div>
            </div>
        </div>

        <div class="comment">
            <van-tabs type="card">
                <van-tab title="全部24">
                    <div class="">
                        <div class="evaluate df " v-for="item in rateList" :key="item.username">
                            <van-image round width="1.3rem" height="1.3rem" :src="item.avatar" />
                            <div class="evaluate_user">
                                <div class="df jcsb ef">
                                    <h3>{{ item.username }}</h3>
                                    <span>2016-07-23 21:52:44</span>
                                </div>

                                <van-rate v-model="value" allow-half void-icon="star" void-color="#eee" color="#ffc107" />
                                <span class="data">30分钟送达</span>
                                <p>{{ item.text }}</p>
                                <van-icon name="good-job-o" />
                                <div class="vegetable" v-for="ip in item.recommend" :key="ip">
                                    <span>{{ ip }}</span>
                                </div>
                            </div>
                        </div>
                    </div>


                </van-tab>
                <van-tab title="满意18">内容 2</van-tab>
                <van-tab title="不满意6">内容 3</van-tab>
            </van-tabs>
        </div>

    </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";

export default {
    data() {
        return {
            value: 2.5,
            active: 2,
        };
    },
    created() {
        this.$store.dispatch("shop/A_getShopRate")
    },
    computed: {
        ...mapState("shop", ["rateList"]),
        ...mapGetters("shop", ["goodRateList", "badRateList"]),
    },
};
</script>

<style lang="scss" scoped>
.app{
    height: 100%;
    overflow-y: scroll;
}
.nav {
    width: 100%;
    height: 160px;
    background: #ffffff;


    .details {
        // border: 1px solid red;
        height: 160px;
        // padding: 30px;
        color: black;

        .details_l {
            width: 30%;
            height: 100%;
            // border: 1px solid rgb(68, 0, 205);
            text-align: center;
            margin: auto;

            .num {
                font-size: 30px;
                color: #ffb24d;
                font-weight: bold;
                margin: 30px 0 0 0;
            }

            .comprehensive {
                font-size: 20px;
                margin: 5px 0 0 0;
            }

            .higher {
                font-size: 16px;
                color: #878484;
                margin: 10px;
            }
        }

        .details_f {
            width: 7rem;
            height: 65%;
            border-left: 1px solid rgba(177, 177, 177, 0.638);
            margin: auto;
            padding-left: 0.5rem;
            font-size: 17px;

            p {
                margin: 0 0 10px 0;

                span {
                    font-size: 17px;
                    font-weight: bold;
                    color: #ffb24d;
                }
            }

            .data {
                color: #878484;
                font-weight: 400;
            }
        }
    }
}

.comment {
    width: 100%;
    // height: 200px;
    background: #ffffff;
    margin-top: 30px;
    padding: 20px 10px 0 10px;


    :deep .van-tabs__wrap {
        height: 46px;
    }

    :deep .van-tabs__nav {
        height: 45px;
    }

    :deep .van-tab.van-tab--active {
        background: #ffb24d;
        color: black !important;
        font-size: 17px;
        font-weight: bold;

    }

    :deep .van-tabs__nav--card {
        border: 1px solid #ffb24d;
        border-radius: 10px;
        overflow: hidden;

        .van-tab {
            color: #ffb24d;
            font-weight: bold;
            font-size: 17px;
            border-right: 1px solid #ffb24d;
        }
    }

    .evaluate {
        margin-top: 20px;
        border-bottom: 1px solid #7b7b7b69;
        padding: 20px 0 0 20px;

        .evaluate_user {
            color: black;
            // border: 1px solid red;
            padding: 10px;


            h3 {
                font-size: 13px;
                font-weight: bold;
            }

            .data {
                font-size: 15px;
                color: #878484;
                padding: 10px;
            }

            .ef {
                margin: 0 0 10px 0;

                span {
                    color: #878484;
                }
            }

            :deep .van-icon-good-job-o {
                font-size: 25px;
            }

            .vegetable {


                span {
                    color: #878484a5;
                    display: inline-block;
                    border: 1px solid #878484a3;
                    padding: 3px;
                    border-radius: 3px;
                }
            }
        }
    }

}
</style>